<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  ~ Copyright (c) 2018-2019 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
  ~ which is available at https://www.apache.org/licenses/LICENSE-2.0.
  ~
  ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

<div id="RefinementView">
    <div class="refinementContainer">
        <div class="informationContainer" *ngIf="!refinementIsRunning; else showIsRunning">
            <div *ngIf="refinementIsDone; else showStart">
                <h5>{{refinementType === 'patternDetection' ? 'Detection' : 'Refinement'}} successful!</h5>
            </div>
            <ng-template #showStart>
                <button class="btn btn-primary" (click)="startRefinement($event)">
                    Start {{refinementType === 'patternDetection' ? 'Detection' : 'Refinement'}}
                </button>
            </ng-template>
        </div>
        <ng-template #showIsRunning>
            <div class="loader" *ngIf="refinementIsLoading; else showContent"></div>
            <ng-template #showContent>
                <ul>
                    <li *ngFor="let candidate of prmCandidates" (mouseover)="onHoverOver(candidate)"
                        (mouseleave)="hoverOut()">
                        {{ candidate.refinementModel.name }}
                        <br>
                        <div class="btn-group">
                            <button *ngIf="refinementType !== 'patternDetection'; else detectionButton"
                                    class="btn btn-sm btn-info"
                                    (click)="openModeler($event, candidate.refinementModel.name, 
                                    candidate.refinementModel.targetNamespace, 'refinementstructure')">
                                Show Solution Structure
                            </button>
                            <ng-template #detectionButton>
                                <button class="btn btn-sm btn-info"
                                        (click)="openModeler($event, candidate.refinementModel.name, 
                                        candidate.refinementModel.targetNamespace, 'detector')">
                                    Show Pattern Structure
                                </button>
                            </ng-template>
                            <br>
                            <button class="btn btn-sm btn-primary" (click)="prmChosen($event, candidate)">
                                Choose
                            </button>
                        </div>
                    </li>
                </ul>
                <button class="btn btn-sm btn-danger" *ngIf="showStopButton()" (click)="stopRefinement()">
                    Stop
                </button>
            </ng-template>
        </ng-template>
    </div>
</div>

<winery-modal bsModal #confirmRefineModal="bs-modal" [modalRef]="confirmRefineModal">
    <winery-modal-header [title]="'This PRM does not refine all Behavior Patterns'">
    </winery-modal-header>
    <winery-modal-body>
        <div  *ngIf="confirmCandidate != null">
            <p id="elementToRemoveMessage">
                The PRM <span
                style="font-weight:bold;">{{ confirmCandidate.refinementModel.name }}</span> shows the following warnings:
            </p>
            <ul>
                <li *ngFor="let nodeId of object.keys(confirmCandidate.warnings)">
                    Warnings for Node Template  <span style="font-weight:bold;">{{ nodeId }}</span>
                    <ul>
                        <li *ngFor="let warning of confirmCandidate.warnings[nodeId]">
                            {{ warning }}
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </winery-modal-body>
    <winery-modal-footer (onOk)="candidateConfirmed(confirmCandidate)"
                         [closeButtonLabel]="'No'"
                         [okButtonLabel]="'Yes'">
    </winery-modal-footer>
</winery-modal>
